
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天室</title>
  <link rel="stylesheet" href="css/chat.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
  <script src="./js/chat.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/vue.min.js"></script>
</head>
<body>
  <div id="chat-app" class="chat-parent-div" >
    <!--在线用户-->
      <!-- 排行榜 -->
      <div class="users-div rank-div">
          <div class="chat-title-div rank-title-div">在线用户</div>
          <div class="rank-content-parent-div">
              <!-- 内容 -->
              <div v-for="(item,i) in users" :key="i" class="user-item-div">
                  <span class="user-item"> {{item}} </span>
              </div>
          </div>
      </div>
    <!-- 排行榜 -->
    <div class="rank-div">
      <div class="chat-title-div">消息排行TOP10</div>
      <div class="rank-content-parent-div">
        <!-- 内容 -->
         <div v-for="(item,i) in ranks" :key="i" class="rank-content-div"> 
          <span style="width: 5em;"> {{item.value}} </span>  
          <span style="width: 2em;">{{item.score}}</span>
        </div>
      </div>
    </div>
    <!-- 聊天界面 -->
     <div class="chat-div">
      <!-- 标题 -->
      <div class="chat-title-div">聊天室</div>
      <!-- 内容 -->
      <div class="content-div" id="content">
        <div v-for="item in records" :key="item.id" class="content-detail-div">
          <!-- 时间 -->
          <div class="time-div">{{item.createdAt | dateTimeFormat}}</div>
          <!-- 发送人及内容 -->
            <div>{{item.sender}}：{{item.content}}</div>
      
        </div>
      </div>
      <!-- 输入框 -->
      <div class="input-div">
        <div>
          <input v-model="message" type="text" class="el-input">
          <button @click="sendMessage()" class="el-btn">发送</button>
        </div>
      </div>
     </div>
   
  </div>
</body>
</html>